<template>
  <!-- 数据管理抽屉 -->
  <el-drawer
    :custom-class="isAdmin==1?'drawerClass is-admin':'drawerClass'"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="handleClose"
    :modal="false"
    :size="isAdmin==1?'100%':'40%'"
    :show-close="isAdmin==1?false:true"
    :append-to-body="true"
  >
    <div class="main">
      <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('acd')">
            <img src="../../assets/mainMenuImg/ACD.png" class="img" />
            <div class="text">{{$t('m.ACD_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>
      <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('auth')">
            <img src="../../assets/mainMenuImg/Authority.png" class="img" />
            <div class="text">{{$t('m.AUTHENTICATION_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>
      <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('group')">
            <img src="../../assets/mainMenuImg/Group.png" class="img" />
            <div class="text">{{$t('m.GROUP_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>
      <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('operator')">
            <img src="../../assets/mainMenuImg/Dispatcher.png" class="img" />
            <div class="text">{{$t('m.OPERATOR_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>
      <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('employee')">
            <img src="../../assets/mainMenuImg/Clerk.png" class="img" />
            <div class="text">{{$t('m.EMPLOYEE_MANAGEMENTL')}}</div>
          </div>
        </div>
      </div>
      <!-- <div :class="isAdmin==1?'isBig partAll':'partAll'" @click="handleOpen('video')">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part">
            <img src="../../assets/mainMenuImg/Video.png" class="img" />
            <div class="text">视频管理</div>
          </div>
        </div>
      </div>-->
      <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('duty')">
            <img src="../../assets/mainMenuImg/Duty.png" class="img" />
            <div class="text">{{$t('m.DUTY_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>
      <!-- <div :class="isAdmin==1?'isBig partAll':'partAll'" @click="handleOpen('black')">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part">
            <img src="../../assets/mainMenuImg/BlackList.png" class="img" />
            <div class="text">{{$t('m.BLACK_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>-->
      <!-- <div :class="isAdmin==1?'isBig partAll':'partAll'" @click="handleOpen('audioFile')">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part">
            <img src="../../assets/mainMenuImg/VoiceDocument.png" class="img" />
            <div class="text">语音文件管理</div>
          </div>
        </div>
      </div>-->
      <div :class="isAdmin==1?'isBig partAll':'partAll'" v-if="isAdmin==0">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('call')">
            <img src="../../assets/mainMenuImg/Records.png" class="img" />
            <div class="text">{{$t('m.CALL_RECORD_MANAGEMENT')}}</div>
          </div>
        </div>
      </div>
      <!-- <div :class="isAdmin==1?'isBig partAll':'partAll'" @click="handleOpen('menu')">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part">
            <img src="../../assets/mainMenuImg/VoiceRecord.png" class="img" />
            <div class="text">菜单管理</div>
          </div>
        </div>
      </div>-->
      <div :class="isAdmin==1?'isBig partAll':'partAll'" v-if="isAdmin==1">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <div class="small-part" @click="handleOpen('exit')">
            <img src="../../assets/mainMenuImg/Exit.png" class="img" />
            <div class="text">{{$t('m.QUIT')}}</div>
          </div>
        </div>
      </div>
      <!-- <div :class="isAdmin==1?'isBig partAll':'partAll'">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <img src="../../assets/mainMenuImg/VoiceRecord.png" class="img" />
          <div class="text">录音记录管理</div>
        </div>
      </div>
      <div :class="isAdmin==1?'isBig partAll':'partAll'" @click="handleOpen('warning')">
        <div :class="isAdmin==1?'part is-admin-part':'part'">
          <img src="../../assets/mainMenuImg/AlarmInfo.png" class="img" />
          <div class="text">告警区域管理</div>
        </div>
      </div>-->
    </div>
    <Acd v-if="acdDialog" :acdDialog.sync="acdDialog" />
    <auth-manage v-if="authDialog" :authDialog.sync="authDialog" />
    <group-manage v-if="groupDialog" :groupDialog.sync="groupDialog" />
    <operator-manage v-if="operatorDialog" :operatorDialog.sync="operatorDialog" />
    <employee-manage v-if="employeeDialog" :employeeDialog.sync="employeeDialog" />
    <duty-manage v-if="dutyDialog" :dutyDialog.sync="dutyDialog" />
    <video-manage v-if="videoDialog" :videoDialog.sync="videoDialog" />
    <black-manage v-if="blackDialog" :blackDialog.sync="blackDialog" />
    <call-manage v-if="callDialog" :callDialog.sync="callDialog" />
    <warning-manage v-if="warningDialog" :warningDialog.sync="warningDialog" />
    <File
      v-if="fileDialog"
      :open.sync="fileDialog"
      @handleFileCall="handleFileCall"
      :isDataManage.sync="isDataManage"
    />
    <!-- 菜单配置 -->
    <menu-bar v-if="menuBarDialog" title="菜单配置" @handleMenu="handleMenu"></menu-bar>
  </el-drawer>
</template>

<script>
import { userLogout } from '@/api/user'
import File from '../Phone/File'
import Acd from './Acd'
import OperatorManage from './OperatorManage'
import EmployeeManage from './EmployeeManage'
import GroupManage from './GroupManage'
import DutyManage from './DutyManage'
import AuthManage from './AuthManage'
import VideoManage from './VideoManage'
import BlackManage from './BlackManage'
import CallManage from './CallManage'
import WarningManage from './WarningManage'
import MenuBar from '../MenuBar'
export default {
  props: {
    drawer: Boolean,
  },
  components: {
    File,
    Acd,
    OperatorManage,
    EmployeeManage,
    GroupManage,
    DutyManage,
    AuthManage,
    VideoManage,
    BlackManage,
    CallManage,
    WarningManage,
    MenuBar,
  },
  data() {
    return {
      fileDialog: false,
      acdDialog: false,
      operatorDialog: false,
      employeeDialog: false,
      groupDialog: false,
      dutyDialog: false,
      authDialog: false,
      videoDialog: false,
      blackDialog: false,
      callDialog: false,
      warningDialog: false,
      menuBarDialog: false,
      isAdmin: 0,
      isDataManage: true,
    }
  },
  methods: {
    init() {
      this.isAdmin = sessionStorage.getItem('isAdmin')
    },
    //关闭
    handleClose() {
      this.$emit('update:drawer', false)
    },
    //打开
    handleOpen(flag) {
      switch (flag) {
        case 'acd':
          this.acdDialog = true
          break
        case 'auth':
          this.authDialog = true
          break
        case 'group':
          this.groupDialog = true
          break
        case 'operator':
          this.operatorDialog = true
          break
        case 'employee':
          this.employeeDialog = true
          break
        case 'duty':
          this.dutyDialog = true
          break
        case 'audioFile':
          this.fileDialog = true
          break
        case 'video':
          this.videoDialog = true
          break
        case 'black':
          this.blackDialog = true
          break
        case 'call':
          this.callDialog = true
          break
        case 'warning':
          this.warningDialog = true
          break
        case 'menu':
          this.menuBarDialog = true
          break
        case 'exit':
          this.handleLoginOut()
          break
        default:
          break
      }
    },
    //文件上传回调,
    handleFileCall() {},
    //注销登录
    handleLoginOut() {
      userLogout().then((res) => {
        if (res.data.msg == 'success') {
          sessionStorage.clear()
          destroySDK()
          //软电话登出
          Webrtc2Sip.destroy()
          //摘挂机socket退出
          if (this.localWebSocketFlag) {
            let websocket = this.websocketLocalClient
            websocket.onclose = (msg) => {
              state.localWebSocketFlag = false
            }
          }
        } else {
          this.$Message.warning('退出异常')
          return
        }
        this.$router.push('/login')
      })
    },
    //
    handleMenu(e) {
      this.menuBarDialog = e
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
.el-drawer__wrapper {
  z-index: 2002 !important;
}
/deep/.is-admin {
  opacity: 1 !important;
}
/deep/.drawerClass {
  background-color: #191933;
  opacity: 0.9;
  width: 100%;

  .main {
    display: flex;
    flex-wrap: wrap;
    margin: 30px;
    color: white;
    .partAll {
      border-radius: 10%;
      border: 1px solid #191933;
      height: 30%;
      width: 30%;
    }
    .isBig {
      width: 30%;
      text-align: center;
    }
    .part:hover {
      background-color: #838383;
      border-radius: 10%;
      box-sizing: border-box;
    }
    .part {
      box-sizing: border-box;
      margin: 0 auto;
      font-size: 12px;
      text-align: center;
      height: 100%;
      .small-part {
        padding: 20px;
      }
    }
    .is-admin-part {
      width: 30%;
      margin-left: 30%;
    }
  }
  @media screen and(max-width: 1440px) {
    /deep/.el-drawer__header {
      margin-bottom: 0px;
      padding: 0px 20px 0;
    }
    .main {
      margin: 20px;
      .part {
        font-size: 12px;
        text-align: center;
      }
    }
  }
  @media screen and(max-width: 1024px) {
    /deep/.drawerClass {
      width: 37%;
      .el-drawer__header {
        padding: 0px 0px 0;
        margin-bottom: 0px;
      }
      .main {
        margin: 8px;
        .partAll {
          width: 30%;
        }
        .part {
          font-size: 8px;
          text-align: center;
        }
        .img {
          width: 40px;
        }
        .text {
          transform: scale(0.8);
        }
      }
    }
  }
}
</style>